<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>设备详情</span>
          <el-button link @click="goBack">返回设备列表</el-button>
        </div>
      </template>

      <el-descriptions title="基本信息" :column="3" border v-loading="loading">
        <el-descriptions-item label="设备名称">{{ equipment.name }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{ equipment.code }}</el-descriptions-item>
        <el-descriptions-item label="设备型号">{{ equipment.model }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">
          <dict-tag :options="typeOptions" :value="equipment.type" />
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <dict-tag :options="statusOptions" :value="equipment.status" />
        </el-descriptions-item>
        <el-descriptions-item label="生产厂家">{{ equipment.manufacturer }}</el-descriptions-item>
        <el-descriptions-item label="购买日期" :span="2">
          {{ parseTime(equipment.purchaseDate, '{y}-{m}-{d}') }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ parseTime(equipment.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="所属部门">{{ equipment.deptName }}</el-descriptions-item>
        <el-descriptions-item label="负责人" :span="2">{{ equipment.manager }}</el-descriptions-item>
        <el-descriptions-item label="描述" :span="3">{{ equipment.description }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="center">技术参数</el-divider>

      <el-table :data="techParamsList" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="参数名称" />
        <el-table-column prop="value" label="参数值" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="description" label="说明" />
      </el-table>

      <el-divider content-position="center">相关文档</el-divider>

      <el-table :data="fileList" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="文件名称" />
        <el-table-column prop="type" label="文件类型">
          <template #default="scope">
            <el-tag>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="uploadTime" label="上传时间">
          <template #default="scope">
            <span>{{ parseTime(scope.row.uploadTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="downloadFile(scope.row)" icon="Download">下载</el-button>
            <el-button link type="primary" @click="previewFile(scope.row)" icon="View">预览</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-divider content-position="center">校准记录</el-divider>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleCalibration"
            v-hasPermi="['qep:calibration:list']"
          >查看校准记录</el-button>
        </el-col>
      </el-row>

      <el-table :data="recentCalibrations" stripe style="width: 100%" v-loading="loading">
        <el-table-column label="校准日期" prop="calibrationDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.calibrationDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="校准结果" prop="result" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.result === '1' ? 'success' : 'danger'">
              {{ scope.row.result === '1' ? '合格' : '不合格' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="校准人员" prop="calibrator" />
        <el-table-column label="下次校准日期" prop="nextCalibrationDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.nextCalibrationDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>

      <el-divider content-position="center">维护记录</el-divider>

      <el-empty description="暂无维护记录" v-if="!maintenanceList.length"></el-empty>
      <el-table :data="maintenanceList" stripe style="width: 100%" v-else v-loading="loading">
        <el-table-column label="维护日期" prop="maintenanceDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.maintenanceDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="维护类型" prop="type" width="100">
          <template #default="scope">
            <el-tag>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="维护人员" prop="maintainer" />
        <el-table-column label="维护内容" prop="content" show-overflow-tooltip />
      </el-table>
    </el-card>

    <!-- 文件预览对话框 -->
    <el-dialog v-model="previewVisible" title="文件预览" width="70%" append-to-body>
      <iframe v-if="previewUrl" :src="previewUrl" style="width: 100%; height: 600px;"></iframe>
    </el-dialog>
  </div>
</template>

<script setup>
import { getEquipment } from '@/api/qep/equipment';
import { listCalibration } from '@/api/qep/equipment';
import { getDicts } from '@/api/system/dict/data';
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { parseTime } from '@/utils/ruoyi';
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

// 遮罩层
const loading = ref(false);
// 设备信息
const equipment = ref({});
// 技术参数列表
const techParamsList = ref([]);
// 文件列表
const fileList = ref([]);
// 最近的校准记录
const recentCalibrations = ref([]);
// 维护记录列表
const maintenanceList = ref([]);
// 文件预览对话框
const previewVisible = ref(false);
// 预览URL
const previewUrl = ref('');
// 设备类型选项
const typeOptions = ref([]);
// 设备状态选项
const statusOptions = ref([]);

onMounted(() => {
  // 获取字典数据
  getDicts("qep_equipment_type").then(response => {
    typeOptions.value = response.data;
  });
  getDicts("sys_normal_disable").then(response => {
    statusOptions.value = response.data;
  });
  
  // 获取设备ID参数
  const id = route.query.id;
  if (id) {
    // 获取设备详情
    getEquipmentDetail(id);
    // 获取最近的校准记录
    getRecentCalibrations(id);
  } else {
    ElMessage.error("未找到设备ID参数");
    router.push({ path: '/basic/equipment' });
  }
});

/** 获取设备详情 */
function getEquipmentDetail(id) {
  loading.value = true;
  getEquipment(id).then(response => {
    equipment.value = response.data;
    // 模拟技术参数数据
    techParamsList.value = [
      { name: '量程', value: '0-100', unit: 'mm', description: '测量范围' },
      { name: '精度', value: '0.01', unit: 'mm', description: '测量精度' },
      { name: '工作温度', value: '10-40', unit: '℃', description: '适宜工作温度' }
    ];
    // 模拟文件数据
    fileList.value = [
      { id: 1, name: '设备说明书.pdf', type: 'PDF', uploadTime: new Date() },
      { id: 2, name: '校准证书.jpg', type: 'Image', uploadTime: new Date() }
    ];
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
}

/** 获取最近的校准记录 */
function getRecentCalibrations(equipmentId) {
  const queryParams = {
    pageNum: 1,
    pageSize: 5,
    equipmentId: equipmentId
  };
  listCalibration(queryParams).then(response => {
    recentCalibrations.value = response.rows;
  });
}

/** 返回设备列表 */
function goBack() {
  router.push({ path: '/basic/equipment' });
}

/** 校准记录按钮操作 */
function handleCalibration() {
  router.push({ path: '/equipment/calibration', query: { equipmentId: equipment.value.id } });
}

/** 下载文件 */
function downloadFile(file) {
  ElMessage.success(`下载文件：${file.name}`);
}

/** 预览文件 */
function previewFile(file) {
  // 这里应该是文件预览的URL
  previewUrl.value = '/preview?fileId=' + file.id;
  previewVisible.value = true;
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 